const hColumn2DConfig = {
    chart: {
        type: 'column',
        height: 220,
    },
    credits: {
        enabled: false
    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    colors: ['#F68C1F', '#1270b8', '#a6ddf6', '#35ace1', '#4285f4', '#ffd200'],
    xAxis: {
        title: {
            text: ''
        },
        categories: [
            // 'Jan',
        ],
        crosshair: true,
        labels: {
            // step: 3,
            // rotation: 60,
        },
        tickLength: 0,
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        // maxPadding: 0.01,
        tickPixelInterval: 50,
    },
    legend: {
        itemStyle: {
            'font-size': '10px'
        },
        symbolHeight: 10,
    },
    tooltip: {
        headerFormat: '<strong style="font-size:10px">{point.key}</strong><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}：</td>' +
            '<td style="padding:0"><span>{point.y:.2f}{point.tooltip.valueSuffix}</span></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0,
            borderWidth: 0,
            groupPadding: 0.1,
        }
    },
    series: [
        // {
        //     name: 'Tokyo',
        //     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        // }, {
        //     name: 'New York',
        //     data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        // }, {
        //     name: 'London',
        //     data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        // }, {
        //     name: 'Berlin',
        //     data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

        // }
    ]
};


const hPie2DConfig = {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    credits: {
        enabled: false
    },
    colors: ['#F68C1F', '#1270b8', '#a6ddf6', '#35ace1', '#4285f4', '#ffd200'],
    title: {
        text: ''
    },
    tooltip: {
        headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
        pointFormat: '{series.name}: <b style="opacity: 0.8">{point.percentage:.2f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: false,
            size: '95%',
        }
    },
    series: [{
        name: '占比',
        colorByPoint: true,
        data: [
            // {
            //     name: 'Microsoft Internet Explorer',
            //     y: 56.33
            // }, 
        ]
    }]
}

const hArea2DConfig = {
    chart: {
        type: 'area',
        marginBottom: 50,
        height: 220,
    },
    credits: {
        enabled: false
    },
    colors: ['#F68C1F', '#1270b8', '#a6ddf6', '#35ace1', '#4285f4', '#ffd200'],
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        title: {
            text: ''
        },
        categories: [],
        // crosshair: true,
        labels: {
            // step: 3,
        },
        tickLength: 0,
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        labels: {
            // formatter: function() {
            //     return this.value / 1000 + 'k';
            // }
        },
    },
    legend: {
        itemStyle: {
            'font-size': '10px'
        },
        symbolHeight: 10,
    },
    tooltip: {
        pointFormat: '{series.name}：<b>{point.y:,.0f}</b>'
    },
    plotOptions: {
        area: {
            // pointStart: '20151126',
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            fillOpacity: 1,
        }
    },
    series: [
        // {
        //     name: '',
        //     data: [
        //         null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640, 1005, 1436,
        //             2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 27387, 29459, 31056, 31982,
        //             32040, 31233, 29224, 27342, 26662, 26956, 27912, 28999, 28965, 27826, 25579,
        //             25722, 24826, 24605, 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344,
        //             23586, 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
        //             10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104
        //     ]
        // },
        // {
        //     name: 'USSR/Russia',
        //     data: [
        //     null, null, null, null, null, null, null, null, null, null, 5, 25, 50,
        //         120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 4238, 5221, 6129,
        //         7089, 8339, 9399, 10538, 11643, 13092, 14478, 15915, 17385, 19055, 21205,
        //         23044, 25393, 27935, 30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000,
        //         41000, 39000, 37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000,
        //         22000, 21000, 20000, 19000, 18000, 18000, 17000, 16000
        //     ]
        // }
    ]
};

const hLineConfig = {
    chart: {
        type: 'line',
        height: 220,
    },
    credits: {
        enabled: false
    },
    colors: ['#F68C1F', '#1270b8', '#a6ddf6', '#35ace1', '#4285f4', '#ffd200'],
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        type: '',
        categories: [],
        labels: {

        },
        title: {
            text: ''
        },
        tickLength: 0,
    },
    yAxis: {
        title: {
            text: ''
        },
        min: 0,
        minorGridLineWidth: 0,
        gridLineWidth: 0,
        alternateGridColor: null,
    },
    legend: {
        itemStyle: {
            'font-size': '10px'
        },
        symbolHeight: 10,
    },
    tooltip: {
        pointFormat: '{series.name}：<b>{point.y:,.2f}</b>'
    },
    plotOptions: {
        line: {
            lineWidth: 1,
            states: {
                hover: {
                    // lineWidth: 5
                }
            },
            marker: {
                enabled: false
            },
            // pointInterval: 3600000, // one hour
            // pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)
        }
    },
    series: [
    // {
    //     name: '',
    //     data: [
    //         // 3.0
    //     ]
    // }, 
    ],
    // navigation: {
    //     menuItemStyle: {
    //         fontSize: '10px'
    //     }
    // }
}


export {
    hColumn2DConfig, hPie2DConfig, hArea2DConfig, hLineConfig
}
